<template>
  <div class="home">
    <BookTop :sliderContent="sliderContent" :topBooks="topBooks" :weekcommend="weekcommend"></BookTop>
    <BookHotRank :hotRecommend="hotRecommend"></BookHotRank>
    <BookFineRank :goodRecommend="goodRecommend"></BookFineRank>
    <BookUpdateRank></BookUpdateRank>
  </div>
</template>
<script lang="ts" setup>
import {useRoute, useRouter} from "vue-router";
import {nextTick, onMounted, reactive, toRefs} from "vue";
import {ElLoading} from "element-plus";
import {listHomeBooks} from "@/api/home";
import BookTop from "@/components/home/BookTop.vue";
import BookHotRank from "@/components/home/BookHotRank.vue";
import BookFineRank from "@/components/home/BookFineRank.vue";
import BookUpdateRank from "@/components/home/BookUpdateRank.vue";
import {useNavbarStore} from "@/stores/navbar";

const route = useRoute()
const router = useRouter()
const navbarStore = useNavbarStore()

interface Book {
  type: 0 | 1 | 2 | 3 | 4;
  // 其他 book 对象的属性...
}

interface State {
  sliderContent: Book[];
  topBooks: Book[];
  weekcommend: Book[];
  hotRecommend: Book[];
  goodRecommend: Book[];
  imgBaseUrl: string;
}

const state = reactive<State>({
  // 轮播图
  sliderContent: [],
  // 顶部栏
  topBooks: [],
  //本周强推
  weekcommend: [],
  // 热门推荐
  hotRecommend: [],
  // 精品推荐
  goodRecommend: [],
  //图片地址
  // imgBaseUrl: process.env.VITE_APP_BASE_IMG_URL
  imgBaseUrl: import.meta.env.VITE_APP_BASE_IMG_URL
});
const {sliderContent, topBooks, weekcommend, hotRecommend, goodRecommend, imgBaseUrl} = toRefs(state)
console.log(sliderContent)
onMounted(async () => {
  const loadingInstance = ElLoading.service({
    target: ".home",
    text: "加载中。。。"
  });
  const {data} = await listHomeBooks();
  await data.forEach((book: Book) => {
    if (book.type == 0) {
      state.sliderContent.push(book);
    }
    if (book.type == 1) {
      state.topBooks.push(book);
    }
    if (book.type == 2) {
      state.weekcommend.push(book);
    }
    if (book.type == 3) {
      state.hotRecommend.push(book);
    }
    if (book.type == 4) {
      state.goodRecommend.push(book);
    }
  })
  nextTick(() => {
    loadingInstance.close();
  })
});
</script>


<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  background-color: #F5F5F5;
}
</style>